<template>
  <div class="br-layout-relative">
    <div class="br-layout-relative" style="height: 300px;">
      <div class="br-layout-absolute" style="position: absolute;top: 0;left: 0;bottom: unset;right: 0;height: 30px;text-align: right;">
        <el-button type="primary"  size="mini" @click="getTable">选 择</el-button>
      </div>
      <div class="br-layout-absolute" style="position: absolute;top: 30px;left: 0;bottom: 0;right: 0;overflow: auto;">
        <el-tree :data="data" node-key="id" :load="handleLoad" lazy :expand-on-click-node="false" @node-click="setSql">
          <span class="brightness-custom-tree-node" slot-scope="{ node, data }">
            <template v-if="data.icon===1">
              <i class="el-icon-folder-opened" v-if="node.expanded"></i>
              <i class="el-icon-folder" v-else="node.expanded"></i>
            </template>
            <template v-else-if="data.icon===2">
              <i class="fa fa-table"></i>
            </template>
            <span :style="{'color':data.icon===2&&node.isCurrent?'#409eff':''}">{{ node.label }}</span>
          </span>
        </el-tree>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    explorer
  } from '@/api/database/database'
  export default {
    components: {},
    data() {
      return {
        data: [],
        schemaName: "",
        tableName: "",
      }
    },
    props: {
      connection: {
        type: String,
        required: true
      }
    },
    computed: {},
    methods: {
      getTable(){
         this.$emit('achieve-table', this.schemaName, this.tableName);
      },
      setSql(data, node) {
        if (data.icon === 2) {
          this.schemaName = data.type
          this.tableName = data.label;
        }
      },
      handleLoad(node, resolve) {
        if (!node.label)
          return;
        let params = {
          connection: this.connection,
          nodeId: node.data.type,
          tableName: node.data.type === "schemaTable" ? node.data.label : ""
        };
        explorer(params).then((res) => {
          if (res.data.status === 200) {
            resolve(res.data.data);
          }
        })
      },
      explorer() {
        let params = {
          connection: this.connection,
          nodeId: "",
          tableName: ""
        };
        explorer(params).then((res) => {
          if (res.data.status === 200) {
            if (res.data.data != null)
              this.data = res.data.data;
          }
        })
      }
    },
    created() {},
    mounted() {
      this.explorer();
    }
  };
</script>

<style lang="less" scoped>
</style>
